let path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const html = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports ={
  mode:'production',
  entry:'./src/index.js',
  output:{
    filename:'index.[hash:4].js',
    path:path.resolve(__dirname,'dist')
  },
  plugins:[
    new CleanWebpackPlugin(),
    new html({
      template:'./public/index.html',
      filename:'index.html',
      title:'qqq'
    }) ,
    new MiniCssExtractPlugin({
      filename:'[name].[hash:4].css',
      chunkFilename: '[id].css'
    })
    // ????
  ],
  module:{
    rules:[
      // {
      //   test:/\.css$/,
        
      //   use:[{
      //     loader:MiniCssExtractPlugin.loader,
      //     options:{
      //       esModule:true
      //     }
      //   },'css-loader']
      // },
      // {
      //   test:/\.less$/,
      //   use:[{
      //     loader:MiniCssExtractPlugin.loader,
      //     options:{
      //       esModule:true
      //     }
      //   },'css-loader','less-loader']
      // }


      {
        test:/\.css$/,
        // css-loader  只负责解析css文件
        // style-loader  负责把解析的css文件 放到页面里边
        // loader的加载顺序 时从右向左
        // use:['style-loader','css-loader']
        use:[{
          loader:'style-loader',
          options:{
            insertAt:'top'
          }
        },'css-loader']
      },
      {
        test:/\.less$/,
        use:['style-loader','css-loader','less-loader']
      }


    ]
  }
}